import React, { useEffect } from 'react'
import AMapLoader from '@amap/amap-jsapi-loader';
import styles from "./MapContainer.scss";
import { message } from 'antd';

export default function Index() {
    useEffect(() => {

        let map = null;


        AMapLoader.load({
            key: "e066dd6c5ac5e2f8868269c2e448bad6", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0",              // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ["AMap.Scale", "AMap.HawkEye", "AMap.ControlBar", "AMap.ToolBar", "AMap.Marker", "AMap.Polyline"],     //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        }).then((AMap) => {
            map = new AMap.Map("container", { //设置地图容器id
                viewMode: "3D",         //是否为3D地图模式
                zoom: 10,                //初始化地图级别
                center: [120.270803, 30.311621], //初始化地图中心点位置
            });

            map.on('complete', function () {
                //地图图块加载完成后触发
                console.log('地图图块加载完成');
            });

            var marker = new AMap.Marker({
                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                position: [120.270803, 30.311621],
                title: '千锋教育',
                anchor: 'bottom-center'
            });
            //单独将点标记和矢量圆形添加到地图上
            map.add(marker);
            marker.on('click', () => {
                message.success('当前位置被点击了')
            })


            //配置折线路径
            var path = [
                new AMap.LngLat(116.368904, 39.913423),
                new AMap.LngLat(116.382122, 39.901176),
                new AMap.LngLat(116.387271, 39.912501),
                new AMap.LngLat(116.398258, 39.9046),
            ];
            //创建 Polyline 实例
            var polyline = new AMap.Polyline({
                path: path,
                strokeWeight: 2, //线条宽度
                strokeColor: "red", //线条颜色
                lineJoin: "round", //折线拐点连接处样式
            });
            map.add(polyline);



            var scale = new AMap.Scale()
            var toolBar = new AMap.ToolBar({
                position: {
                    top: '110px',
                    right: '40px'
                }
            })
            var controlBar = new AMap.ControlBar({
                position: {
                    top: '10px',
                    right: '10px'
                }
            })
            var overView = new AMap.HawkEye()

            map.addControl(scale);
            map.addControl(toolBar);
            map.addControl(controlBar);
            map.addControl(overView);



        }).catch(e => {
            console.log(e);
        })


        return () => {
            map?.destroy();
        };

    }, [])
    return (
        <div>
            <h3>高德地图</h3>
            <div id="container" className={styles.container} style={{ height: '450px' }} >
            </div>
        </div>
    )
}
